// 常见的loader有：
// loader会按照从右至左, 从下至上的顺序执行
// 先执行css-loader解析css文件关系拿到所有内容
// 再执行将内容插入到HTML的HEAD代码中
// style-loader
// PostCSS
// bable-loader
// file-loader
// url-loader 处理打包图片规则

// 常见的plugin有：
// HtmlWebpackPlugin：用于生成HTML文件，并自动将打包后的资源文件引入到HTML中。
// MiniCssExtractPlugin：将CSS代码从打包后的JavaScript文件中提取出来，生成单独的CSS文件。
// DefinePlugin：定义全局常量，可以在代码中直接使用。
// CopyWebpackPlugin：将指定的文件或目录复制到输出目录。
// UglifyJsPlugin：用于压缩JavaScript代码。
// OptimizeCSSAssetsPlugin：用于压缩CSS代码。
// ProvidePlugin：自动加载模块，无需手动引入。
// splitChunks : 告诉webpack需要对代码进行分割
// CleanWebpackPlugin 目录清空, 然后再存放新打包的内容, 避免新老混淆问题
